<template>
	<view class="fans">
		<!-- S 顶部导航 -->
		<sol-navbar title="我的粉丝"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 粉丝列表 -->
		<view class="fans_list">
			<view class="fans-item" v-for="fans in fansList" :key="fans.id">
				<sol-avatar :src="fans.avatar" :gender="fans.gender"></sol-avatar>
				<view class="fans-item_box">
					<view class="fans-item_name line-1" v-text="fans.nickname">昵称</view>
					<view class="fans-item_text" v-text="fans.readme">自述</view>
					<text class="fans-item_datetime" v-text="fans.datetime">时间</text>
				</view>
				<image class="fans-item_icon" src="/static/icon-default/icon_more_spot.png" mode="scaleToFill"
					@click="fnOpenClick('open', fans.uid)"></image>
			</view>
		</view>
		<!-- E 粉丝列表 -->

		<!-- S 弹出粉丝头像 -->
		<sol-drawer v-model="fans.open" primary-text="加为好友" confirm-text="屏蔽TA" cancel-text="取消" @click="fnOpenClick">
			<template v-slot:default>
				<view class="fans_item">
					<sol-avatar src="https://dummyimage.com/200x200" size="lg"></sol-avatar>
					<text class="fans_item-name">不完整的蛋</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出粉丝头像 -->

		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "Fans",
		data() {
			return {
				// 粉丝列表
				fansList: [{
						id: 100,
						avatar: 'https://dummyimage.com/200x200',
						gender: 2,
						nickname: '不完整的蛋',
						readme: '换一个人，都不会天色常蓝。',
						datetime: '2020.06.18 14:43'
					},
					{
						id: 101,
						avatar: 'https://dummyimage.com/200x200',
						gender: 1,
						nickname: '支付宝',
						readme: '何时聚，何时散，何时生，何时死。当真是不敌天命的。',
						datetime: '2020.06.18 18:13'
					},
					{
						id: 102,
						avatar: '/static/icon-default/icon_logo.png',
						gender: 1,
						nickname: '红玫瑰与白玫',
						readme: '奈何人是剧中人',
						datetime: '2020.06.18 22:23'
					},
				],
				// 粉丝弹出层
				fans: {
					// 弹出
					open: false,
					// 用户ID
					uid: 0,
				}
			};
		},
		computed: {},
		methods: {
			// 点击更多
			fnClickMore(id) {
				this.$log(this.$options.name, id);
			},
			// 弹出点击
			fnOpenClick(type = '', value = 0) {
				this.$log('fnOpenClick=>', type, value);
				switch (type) {
					case 'open': // 弹出
						this.fans = {
							// 弹出
							open: true,
							// 用户ID
							uid: 0,
						}
						break;
					case 'primary':
						break;
					case 'confirm':
						break;
					case 'mask':
					case 'cancel':
						this.fans = {
							// 弹出
							open: false,
							// 用户ID
							uid: null,
						}
						break;
				}
			}

		}
	}
</script>

<style lang="scss">
	.fans {
		min-height: 100vh;
		background-color: $--color-background;

		&_list {
			padding: 0 28rpx;
		}

		// 列表项
		.fans-item {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 28rpx;

			&_box {
				flex-grow: 1;
				width: 70%;
				padding-left: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
			}

			&_name {
				width: 80%;
				font-size: 28rpx;
				font-weight: 400;
				color: #BBBBBB;
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #DDDDDD;
				margin: 18rpx 0;
				letter-spacing: 4rpx;
			}

			&_datetime {
				font-size: 24rpx;
				font-weight: 400;
				color: #878787;
			}

			&_icon {
				width: 64rpx;
				height: 64rpx;
				display: block;
				background-color: transparent;
			}
		}

		// 弹出粉丝头像
		&_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 42rpx;

			&-name {
				margin-top: 28rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
			}
		}
	}
</style>
